<!-- 模块说明 -->

<script setup lang='ts'>
import axios from 'axios';
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router';
import QrcodeVue from 'qrcode.vue'
import moment from 'moment'
const route = useRoute()
const colors: any = route.query.colors;
const zongjia = ref(0)
const nowlist: any = ref(JSON.parse(colors))
const jiesuanurl = ref()
const dialogVisible = ref(false)
const flag = ref(true)
const ordernum = ref()
const timer = ref()
const username = ref(JSON.parse(localStorage.getItem('pinia-customer') + '').userid)
const userid = ref()
const tell = ref()
const dizhizhi = ref()
const getsonlist = () => {
    zongjia.value = nowlist._rawValue.reduce((preVal: any, currVal: any) => { return preVal + currVal.productcount * currVal.price; }, 0)
}
//支付
const zhifu = async () => {
    let times = moment().format('yyyy-MM-DD HH:mm:ss')

    const ordernumber = parseInt((Math.random() * 9 + 1) * 100000000000 + '')
    ordernum.value = ordernumber
    let res = await axios({
        url: 'http://182.92.162.156:8083/order/add',
        method: 'post',
        data: {
            userid: JSON.parse(localStorage.getItem('pinia-customer') + '').userid,
            addr: dizhizhi.value,
            orderinfo: '客户测试信息',
            ordernumber,
            totalfee: zongjia.value,
            untitled: '测试',
            time: times
        }
    })
    console.log(res, '支付');
    // console.log(res.data.data, '支付');
    jiesuanurl.value = res.data.data
    dialogVisible.value = true
    timer.value = setInterval(() => {
        zhuangtai()
    }, 1000);
}

//状态查询
const zhuangtai = async () => {
    let res = await axios({
        url: 'http://182.92.162.156:8083/order/status',
        method: 'post',
        data: {
            ordernumber: ordernum.value
        }
    })
    console.log(res, '订单状态');
    if (res.data.data == 'NOTPAY') {
        // console.log('NOTPAY');
    } else if (res.data.data == 'SUCCESS') {
        // console.log('SUCCESS');
        clearInterval(timer.value)
        flag.value = false
    }
}
const saomiaoClose = (done: any) => {
    done()
    clearInterval(timer.value)
}

//查询用户信息\查询用户地址信息
const getuserinfo = async () => {
    let res = await axios({
        url: 'http://182.92.162.156:8083/AYC/customers/select',
        method: 'post',
        data: {
            username: username.value
        }
    })
    // console.log(res.data.data[0].id, '查询用户信息');
    userid.value = res.data.data[0].id
    // setTimeout(() => {
    // getuseraddrinfo()
    // }, 1000);
    let res1 = await axios({
        url: 'http://182.92.162.156:8083/address/getaddress',
        method: 'get',
        params: {
            customerid: userid.value
        }
    })
    console.log(res1.data.data[0], '查询用户地址信息');
    tell.value = res1.data.data[0].tel
    dizhizhi.value = res1.data.data[0].address

}

onMounted(() => {
    getsonlist()
    getuserinfo()
})
</script>

<template>
    <div class="box">
        <div class="box-addr">
            <p>姓名：{{ username }}</p>
            <p>手机：{{ tell }}</p>
            <p>地址：{{ dizhizhi }}</p>
        </div>
        <div>
            <el-table :data="JSON.parse(colors)" style="width: 100%" border>
                <el-table-column label="选购商品">
                    <template #default="scope">
                        <div class="cont">
                            <div class="contone">
                                <img width="50" height="50"
                                    :src="'http://182.92.162.156:8083/product/downpropic?filename=' + scope.row.attr"
                                    alt="">
                            </div>
                            <div>
                                <p>商品：{{ scope.row.productname }}</p>
                                <p>单价：{{ scope.row.price }}元</p>
                                <p>描述：{{ scope.row.productsku }}</p>
                                <p>数量：{{ scope.row.productcount }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="zhuanyong">
            <span>配送服务</span>
            <span>快递免邮></span>
        </div>
        <div class="zhuanyong">
            <span>运费险</span>
            <span>无></span>
        </div>
        <div class="zhuanyong">
            <span>订单备注</span>
            <span>无备注></span>
        </div>
    </div>
    <div class="boo">
        <span>合计：{{ zongjia }}元</span>
        <span class="booright" @click="zhifu">提交订单</span>
    </div>
    <el-dialog v-model="dialogVisible" title="请扫描二维码" width="200" :before-close="saomiaoClose"
        :close-on-click-modal="false" :close-on-press-escape="false">
        <span v-if="flag">
            <qrcode-vue :value="jiesuanurl" :size="150" level="H" />
        </span>
        <span v-else class="zhifuchenggong">
            <img width="100px" height="100px" src="../../assets/payOK.png" alt="">
            <b>支付成功</b>
        </span>
    </el-dialog>
</template>

<style lang="scss" scoped>
.zhuanyong {
    height: 50px;
    border-bottom: 1px solid #fff;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cont {
    display: flex;
    align-items: center;

    .contone {
        margin-left: 10%;
        margin-right: 30%;
    }
}

.boo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: #fff;
    display: flex;
    justify-content: right;
    align-items: center;

    .booright {
        margin: 0 20px;
        background: red;
        height: 40px;
        line-height: 40px;
        border-radius: 20px;
        padding: 0 20px;
        color: #fff;
        font-weight: bold;
    }
}

.zhifuchenggong {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    b {
        font-size: 22px;
    }
}

.morendizhi {
    background: red;
    height: 115px;
}

.box-addr {
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    p {
        margin: 3px 0;
        margin-left: 20px;
    }
}
</style>
